<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-resource.js"></script>
    <link rel="stylesheet" href="../lib/bootstrap.css">
</head>

<body>
    <div id="app">
        
        
        <div class="panel panel-primary">
              <div class="panel-heading">
                    <h3 class="panel-title">添加</h3>
              </div>
              <div class="panel-body form-inline">
                    <label>
                        Name:
                        <input type="text" v-model="name" class="form-controller"/>
                    </label>
                    <label>
                        <input type="button" value="添加" class="btn btn-primary" @click="add"/>
                    </label>
              </div>
        </div>
        
        

        <table class="table table-hover table-striped">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>NAME</th>
                    <th>Ctime</th>
                    <th>Operator</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.createTime}}</td>
                    <td>
                        <a href="" @click.prevent="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>

    <script>
        Vue.http.options.root='http://localhost:8088/';
        Vue.http.options.emulateJSON=true;
        var vm = new Vue({
            el: '#app',
            data: {
                name:'',
                list: []
            },
            methods: {
                add(){
                    //this.$http.post()接受三个参数
                    //1、url地址
                    //2、提交给服务器的数据，以对象的方式提交
                    //3、一个配置对象
                    //   {emulateJSON:true}就会以普通表单提交，application/x-www-form-urlencoded
                    //通过result.body获取结果
                    this.$http.post('saveBrand',{name:this.name}).then(
                        result=>{
                            this.getAllList();
                            this.name = '';
                        }
                    )
                },
                getAllList(){
                    // 通过this.$http获取数据
                    // this.$http.get('url').then(function(result){})
                    this.$http.get('findAll').then(function(result){
                        console.log(result);
                    
                        this.list=result.body;
                    })
                },
                del(id){
                    this.$http.post('deleteBrandById',{id:id}).then(
                        result=>{
                            this.getAllList();
                        }
                    )
                }
            },
            directives: {},
            filters: {
                
            },
            created() {
                this.getAllList();
            },
        })
    </script>

</body>

</html>